<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>订单管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑换货</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content-box">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="info">
					<div class="tab-content">
						<el-row class="card-form" style="margin-top:0;" v-if="orderSelected">
							<el-col :xs="24" :sm="12">
								<el-card shadow="hover">
									<div slot="header" class="clearfix">
										<i class="el-icon-s-goods"></i>
										<span>订单信息</span>
									</div>
									<div class="dl-box">
										<dl>
											<dt>订单号</dt>
											<dd>{{orderSelected.orderNo}}</dd>
										</dl>
										<dl>
											<dt>订单类型</dt>
											<dd>
												<span v-if="orderSelected.orderType==1">抢购订单</span>
												<span v-else-if="orderSelected.orderType==2">商品预售</span>
												<span v-else-if="orderSelected.orderType==3">积分换购</span>
												<span v-else>普通订单</span>
											</dd>
										</dl>
										<dl>
											<dt>支付状态</dt>
											<dd>
												<span v-if="orderSelected.paymentStatus==1">部分支付</span>
												<span v-else-if="orderSelected.paymentStatus==2">全额支付</span>
												<span v-else>待支付</span>
											</dd>
										</dl>
										<dl>
											<dt>配送状态</dt>
											<dd>
												<span v-if="orderSelected.deliveryStatus==1">全部发货</span>
												<span v-else-if="orderSelected.deliveryStatus==2">部分发货</span>
												<span v-else>待发货</span>
											</dd>
										</dl>
										<dl>
											<dt>订单状态</dt>
											<dd>
												<span v-if="orderSelected.refundStatus==1">全部退款</span>
												<span v-else-if="orderSelected.refundStatus==2">部分退款</span>
												<span v-else-if="orderSelected.status==1">等待付款</span>
												<span v-else-if="orderSelected.status==2">等待发货</span>
												<span v-else-if="orderSelected.status==3">等待收货</span>
												<span v-else-if="orderSelected.status==4">订单签收</span>
												<span v-else-if="orderSelected.status==5">订单完成</span>
												<span v-else-if="orderSelected.status==6">订单取消</span>
												<span v-else-if="orderSelected.status==7">订单作废</span>
											</dd>
										</dl>
										<dl>
											<dt>是否保价</dt>
											<dd>
												<span v-if="orderSelected.isInsure==1">是</span>
												<span v-else>否</span>
											</dd>
										</dl>
										<dl>
											<dt>保价金额</dt>
											<dd>
												{{orderSelected.insurePrice}} 元
											</dd>
										</dl>
										<dl>
											<dt>下单时间</dt>
											<dd>
												{{orderSelected.addTime}}
											</dd>
										</dl>
									</div>
								</el-card>
							</el-col>
							<el-col :xs="24" :sm="12">
								<el-card shadow="hover">
									<div slot="header" class="clearfix">
										<i class="el-icon-s-data"></i>
										<span>金额统计</span>
									</div>
									<div class="dl-box">
										<dl>
											<dt>应付商品总额</dt>
											<dd>{{orderSelected.payableAmount}} 元</dd>
										</dl>
										<dl>
											<dt>实付商品总额</dt>
											<dd>{{orderSelected.realAmount}} 元</dd>
										</dl>
										<dl>
											<dt>应付总运费</dt>
											<dd>{{orderSelected.payableFreight}} 元</dd>
										</dl>
										<dl>
											<dt>实付总运费</dt>
											<dd>{{orderSelected.realFreight}} 元</dd>
										</dl>
										<dl>
											<dt>促销优惠金额</dt>
											<dd>-{{orderSelected.promotionAmount}} 元</dd>
										</dl>
										<dl>
											<dt>购物券金额</dt>
											<dd>-{{orderSelected.couponAmount}} 元</dd>
										</dl>
										<dl>
											<dt>订单优惠金额</dt>
											<dd>-{{orderSelected.discountAmount}} 元</dd>
										</dl>
										<dl>
											<dt>订单总金额</dt>
											<dd>{{orderSelected.orderAmount}} 元</dd>
										</dl>
									</div>
								</el-card>
							</el-col>
						</el-row>
						<el-row class="mat-20 mab-20" v-if="form.model.refundGoods">
							<el-table :data="form.model.refundGoods" border class="table-form">
								<el-table-column label="换货商品" min-width="220">
									<template slot-scope="scope">
										<el-image class="pic" fit="contain" :src="$api.loadFile(scope.row.orderGoods.imgUrl)">
											<div slot="error" class="image-slot">
												<i class="el-icon-picture-outline"></i>
											</div>
										</el-image>
										<h4>{{scope.row.orderGoods.goodsTitle}}</h4>
										<span class="date">
											{{scope.row.orderGoods.goodsNo}}
										</span>
									</template>
								</el-table-column>
								<el-table-column prop="orderGoods.skuText" label="规格" min-width="120" show-overflow-tooltip></el-table-column>
								<el-table-column prop="orderGoods.realPrice" label="单价" width="80"></el-table-column>
								<el-table-column prop="orderGoods.quantity" label="数量" width="80"></el-table-column>
								<el-table-column label="状态" width="80" align="center">
									<template slot-scope="scope">
										<el-tag size="small" type="success" effect="dark" v-if="scope.row.orderGoods.deliveryStatus==1">已发货</el-tag>
										<el-tag size="small" type="info" effect="dark" v-else-if="scope.row.orderGoods.deliveryStatus==2">已退货</el-tag>
										<el-tag size="small" type="danger" effect="dark" v-else>待发货</el-tag>
									</template>
								</el-table-column>
							</el-table>
						</el-row>

						<el-card shadow="hover">
							<div slot="header" class="clearfix">
								<i class="el-icon-document-checked"></i>
								<span>审核意见</span>
							</div>
							<el-form ref="editForm1" :model="form" :rules="rules" :label-position="labelPosition" label-width="120px">
								<el-form-item label="申请原因">
									<span v-if="form.model.applyReason">{{form.model.applyReason}}</span>
									<span v-else>暂无说明</span>
								</el-form-item>
								<el-form-item label="申请凭证" v-if="form.model.refundAlbums.length>0">
									<div class="album-box small">
										<div class="list-box" v-for="(item,index) in form.model.refundAlbums" :key="index">
											<div class="img-box">
												<el-image :src="$api.loadFile(item.thumbPath)" :preview-src-list="[$api.loadFile(item.originalPath)]"></el-image>
											</div>
											<span class="text-box" v-if="item.remark">{{file.remark}}</span>
										</div>
									</div>
								</el-form-item>
								<el-form-item prop="handleStatus" label="处理结果" v-if="form.model.handleStatus==0">
									<el-radio-group v-model="form.handleStatus">
										<el-radio :label="1">同意换货</el-radio>
										<el-radio :label="4">拒绝</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="处理结果" v-if="form.model.handleStatus>=3">
									<span v-if="form.model.handleStatus==3">同意换货</span>
									<span v-else>已拒绝</span>
								</el-form-item>
								<el-form-item label="审核意见" v-if="form.model.handleStatus==0">
									<el-input type="textarea" :rows="3" v-model="form.model.handleRemark" maxlength="512" show-word-limit placeholder="必填，512个字符内"></el-input>
								</el-form-item>
								<el-form-item label="审核意见" v-if="form.model.handleStatus>=3&&form.model.handleRemark">
									{{form.model.handleRemark}}
								</el-form-item>
							</el-form>
						</el-card>

						<el-card shadow="hover" class="mat-20" v-if="form.model.handleStatus==1">
							<div slot="header" class="clearfix">
								<i class="el-icon-truck"></i>
								<span>买家发货</span>
							</div>
							<el-form ref="editForm2" :model="form" :rules="rules" :label-position="labelPosition" label-width="120px">
								<el-form-item prop="model.uExpressId" :rules="rules.expressId" label="物流公司">
									<el-select v-model="form.model.uExpressId" placeholder="请选择...">
										<el-option v-for="item in expressList"
											:key="item.id"
											:label="item.title"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item prop="model.uExpressCode" :rules="rules.expressCode" label="物流单号">
									<el-input v-model="form.model.uExpressCode" placeholder="必填，物流快递的单号"></el-input>
								</el-form-item>
								<el-form-item prop="model.uExpressTime" :rules="rules.expressTime" label="发货时间">
									<el-date-picker v-model="form.model.uExpressTime"
										type="datetime"
										placeholder="选择发货时间">
									</el-date-picker>
								</el-form-item>
							</el-form>
						</el-card>
						<el-card shadow="hover" class="mat-20" v-if="form.model.handleStatus==2||form.model.handleStatus==3">
							<div slot="header" class="clearfix">
								<i class="el-icon-truck"></i>
								<span>买家发货</span>
							</div>
							<el-form :label-position="labelPosition" label-width="120px">
								<el-form-item label="物流公司">
									{{findExpress(form.model.uExpressId)}}
								</el-form-item>
								<el-form-item label="物流单号">
									{{form.model.uExpressCode}}
								</el-form-item>
								<el-form-item label="发货时间">
									{{form.model.uExpressTime}}
								</el-form-item>
							</el-form>
						</el-card>

						<el-card shadow="hover" class="mat-20" v-if="form.model.handleStatus==2">
							<div slot="header" class="clearfix">
								<i class="el-icon-truck"></i>
								<span>商家发货</span>
							</div>
							<el-form ref="editForm3" :model="form" :rules="rules" :label-position="labelPosition" label-width="120px">
								<el-form-item prop="model.sExpressId" :rules="rules.expressId" label="物流公司">
									<el-select v-model="form.model.sExpressId" placeholder="请选择...">
										<el-option v-for="item in expressList"
											:key="item.id"
											:label="item.title"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item prop="model.sExpressCode" :rules="rules.expressCode" label="物流单号">
									<el-input v-model="form.model.sExpressCode" placeholder="必填，物流快递的单号"></el-input>
								</el-form-item>
								<el-form-item prop="model.sExpressTime" :rules="rules.expressTime" label="发货时间">
									<el-date-picker v-model="form.model.sExpressTime"
										type="datetime"
										placeholder="选择发货时间">
									</el-date-picker>
								</el-form-item>
							</el-form>
						</el-card>
						<el-card shadow="hover" class="mat-20" v-if="form.model.handleStatus==3">
							<div slot="header" class="clearfix">
								<i class="el-icon-truck"></i>
								<span>商家发货</span>
							</div>
							<el-form :label-position="labelPosition" label-width="120px">
								<el-form-item label="物流公司">
									{{findExpress(form.model.sExpressId)}}
								</el-form-item>
								<el-form-item label="物流单号">
									{{form.model.sExpressCode}}
								</el-form-item>
								<el-form-item label="发货时间">
									{{form.model.sExpressTime}}
								</el-form-item>
							</el-form>
						</el-card>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	export default {
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right', //表单对齐方式
				loading: false,
				orderSelected: [],//订单对象
				expressList: [],//物流公司
				form: {
					handleStatus: null,//临时有处理状态
					model: {
						id: 0,
						merchantId: null,
						orderId: null,
						orderNo: null,
						userId: 0,
						userName: null,
						type: 2,
						applyReason: null,
						applyTime: null,
						handleStatus: 0,
						handleRemark: null,
						handleTime: null,
						refundMode: null,
						refundAmount: null,
						uExpressId: null,
						uExpressCode: null,
						uExpressTime: null,
						sExpressId: null,
						sExpressCode: null,
						sExpressTime: null,
						refundGoods: [],
						refundAlbums: []
					}
				},
				rules: {
					applyReason: [
						{ required: true, message: '请输入申请原因', trigger: 'blur' }
					],
					expressId: [
						{ required: true, message: '请选择物流公司', trigger: 'change' }
					],
					expressCode: [
						{ required: true, message: '请输入物流单号', trigger: 'blur' }
					],
					handleStatus: [
						{ required: true, message: '请选择处理结果', trigger: 'change' }
					],
					expressTime: [
						{ required: true, message: '请选择发货时间', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			//初始化控件
			initLoad() {
				let _this = this;
				//加载物流公司列表
				_this.$api.request({
					url: '/admin/shop/express/view/0',
					success(res) {
						_this.expressList = res.data;
					}
				});
				//加载初始化
				_this.initData();
			},
			//初始化数据
			async initData() {
				let _this = this; //当前页面
				if (!_this.id) {
					_this.$alert('参数有误，找不到换货记录。', '错误提示', {
						confirmButtonText: '确定',
						callback: action => {
							_this.$common.linkUrl('/order/exchange/list');
						}
					});
					return false;
				}
				//查找退换化信息
				await _this.$api.request({
					url: '/admin/order/refund/2/' + _this.id,
					loading: true,
					success(res) {
						//赋值给model
						Object.keys(_this.form.model).forEach(key => { _this.form.model[key] = res.data[key] });
					}
				});
				//查找订单信息
				_this.$api.request({
					url: '/admin/order/' + _this.form.model.orderId,
					success(res) {
						_this.orderSelected = res.data
					}
				});
			},
			//提交订单
			submitForm() {
				let _this = this; //当前页面
				//审核申请
				if (_this.form.model.handleStatus == 0) {
					_this.$refs['editForm1'].validate((valid) => {
						if (valid) {
							//取审核结果赋值
							_this.form.model.handleStatus = _this.form.handleStatus;
							_this.$api.request({
								method: 'put',
								url: '/admin/order/refund/handle/2/' + _this.form.model.id,
								data: _this.form.model,
								successMsg: '审核结果已提交成功',
								beforeSend() {
									_this.loading = true
								},
								success(res) {
									_this.$common.linkUrl('/order/exchange/list');
								},
								complete() {
									_this.loading = false
								}
							});
						}
					});
				}
				//买家发货
				else if (_this.form.model.handleStatus == 1) {
					_this.$refs['editForm2'].validate((valid) => {
						if (valid) {
							_this.$api.request({
								method: 'put',
								url: '/admin/order/refund/return/2/' + _this.form.model.id,
								data: _this.form.model,
								successMsg: '物流信息已提交成功',
								beforeSend() {
									_this.loading = true
								},
								success(res) {
									_this.$common.linkUrl('/order/exchange/list');
								},
								complete() {
									_this.loading = false
								}
							});
						}
					});
				}
				//卖家发货
				else if (_this.form.model.handleStatus == 2) {
					_this.$refs['editForm3'].validate((valid) => {
						if (valid) {
							_this.$api.request({
								method: 'put',
								url: '/admin/order/refund/delivery/2/' + _this.form.model.id,
								data: _this.form.model,
								successMsg: '物流信息已提交成功',
								beforeSend() {
									_this.loading = true
								},
								success(res) {
									_this.$common.linkUrl('/order/exchange/list');
								},
								complete() {
									_this.loading = false
								}
							});
						}
					});
				}
			},
			//查找物流公司名称
			findExpress(id) {
				let _this = this;
				let title = "暂无物流名称";
				_this.expressList.map(item => {
					if (item.id == id) {
						title = item.title;
						return false;
					}
				});
				return title;
			},
		},
		created() {
			this.initLoad();
		}
	}
</script>

<style lang="scss">
	.album-box {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		margin-right: -20px;
		&.small {
			margin-right: -10px;
			.el-upload--picture-card {
				width: 106px;
				height: 106px;
			}
			.list-bin {
				margin: 0 10px 10px 0;
			}
			.list-box {
				margin: 0 10px 10px 0;
				width: 106px;
				height: 106px;
			}
		}
		.el-upload--picture-card {
			display: inline-block;
			width: 120px;
			height: 120px;
			border-radius: 4px;
			line-height: 118px;
		}
		.list-bin {
			margin: 0 20px 20px 0;
		}
		.list-box {
			display: block;
			position: relative;
			margin: 0 20px 20px 0;
			width: 120px;
			height: 120px;
			box-sizing: border-box;
			border-radius: 4px;
			border: 1px solid #DCDFE6;
			overflow: hidden;
			&:hover {
				.tools-box {
					opacity: 1;
					transition: opacity .3s;
				}
			}
			.el-progress {
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.3);
				.el-progress__text {
					color: #409EFF;
				}
			}
			.img-box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				img {
					max-width: 100%;
					max-height: 100%;
				}
			}
			.text-box {
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				box-sizing: border-box;
				padding: 0 10px;
				width: 100%;
				color: #606266;
				font-size: 12px;
				text-shadow: 1px 1px 1px #fff;
				height: 28px;
				line-height: 28px;
				background-color: rgba(255, 255, 255, 0.6);
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.tools-box {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 100%;
				height: 100%;
				color: #fff;
				font-size: 20px;
				left: 0;
				top: 0;
				opacity: 0;
				transition: opacity .3s;
				background-color: rgba(0, 0, 0, 0.5);
				.icon {
					display: block;
					margin: 10px;
					width: 20px;
					height: 20px;
					line-height: 20px;
					cursor: pointer;
				}
			}
		}
	}
</style>